<template>
  <div class="autumn-container">
    <!-- 面包 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>定时任务列表</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="autumn-center">
      <!-- 搜索栏 -->
      <div class="query-form">
        <autumn-search :modelValue="queryInfo" @search="search">
          <template #default>
            <el-col :span="4">
              <el-form-item prop="name" label="标识">
                <el-input v-model="queryInfo.name" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="groupCode" label="任务组">
                <el-select v-model="queryInfo.groupCode" placeholder="请选择">
                  <el-option v-for="(value, key, index) in $listDict('TASK_GROUP')" :key="index" :label="value"
                    :value="key">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="status" label="状态">
                <el-select v-model="queryInfo.status" placeholder="请选择">
                  <el-option v-for="(value, key, index) in $listDict('TASK_STATUS')" :key="index" :label="value"
                    :value="key">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
        </autumn-search>
      </div>

      <!-- 数据表格 -->
      <div class="main-body top">
        <autumn-table ref="mainTableRef" :page="page" @changePage="search" @changeSelect="changeSelect">
          <template #button>
            <el-button type="primary" icon="el-icon-plus" v-if="$hasPermission('job:info:add')" @click="toView">新增
            </el-button>
            <el-button type="danger" icon="el-icon-video-pause" :disabled="selectNum !== 1"
              v-if="$hasPermission('job:info:pause')" @click="pause">暂停</el-button>
            <el-button type="warning" icon="el-icon-refresh-left" :disabled="selectNum !== 1"
              v-if="$hasPermission('job:info:resume')" @click="resume">恢复</el-button>
            <el-button type="success" icon="el-icon-video-play" :disabled="selectNum !== 1"
              v-if="$hasPermission('job:info:trigger')" @click="trigger">立即执行</el-button>
          </template>
          <template #column>
            <el-table-column type="selection" fixed="left" />
            <el-table-column prop="name" label="标识" />
            <el-table-column prop="groupCode" label="任务组">
              <template #default="scope">
                {{ $getDictLabel('TASK_GROUP', scope.row.type, '默认') }}
              </template>
            </el-table-column>
            <el-table-column prop="cron" label="执行表达式" />
            <el-table-column prop="remark" label="描述" />
            <el-table-column prop="isEnable" label="状态" align="center" width="100">
              <template #default="scope">
                <el-tag type="success" size="small" v-if="scope.row.isEnable == 1">启用</el-tag>
                <el-tag type="danger" size="small" v-else>禁用</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="startTime" label="开始时间" align="center" width="150"
              :formatter="(row: any) => $moment(row.startTime, 'YYYY-MM-DD HH:mm')" />
            <el-table-column prop="prevTime" label="上次执行时间" align="center" width="150"
              :formatter="(row: any) => $moment(row.startTime, 'YYYY-MM-DD HH:mm')" />
            <el-table-column prop="nextTime" label="下次执行时间" align="center" width="150"
              :formatter="(row: any) => $moment(row.startTime, 'YYYY-MM-DD HH:mm')" />
            <el-table-column prop="status" label="运行状态" align="center" width="100">
              <template #default="scope">
                {{ $getDictLabel('TASK_STATUS', scope.row.type, '正常') }}
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="120">
              <template #default="scope">
                <el-button-group>
                  <el-button type="primary" icon="el-icon-edit" size="small" title="编辑"
                    v-if="$hasPermission('job:info:update')" @click="toView(scope.row)" />
                  <el-button type="danger" icon="el-icon-delete" size="small" title="删除"
                    v-if="$hasPermission('job:info:delete')" @click="del(scope.row)" />
                </el-button-group>
              </template>
            </el-table-column>
          </template>
        </autumn-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import hooks from 'src/hook/index'
import { $listDict, $getDictLabel, $hasPermission, $moment, $confirmMsg } from 'src/util/tools'
import { pageJobInfo, deleteJobInfo, triggerJobInfo, pauseJobInfo, resumeJobInfo } from 'src/api/job/jobInfo'

const router = useRouter()
const mainTableRef = ref()

// 分页查询
const queryInfo = reactive({
  name: '',
  groupCode: '',
  status: ''
})
const { page, selectNum, changeSelect, search } = hooks.useTable((pageNumber: number, pageSize: number) => {
  pageJobInfo({ ...queryInfo, pageNumber, pageSize }).then(({ data }) => {
    page.data = data.list
    page.total = data.total
  })
})

// 查看
const toView = (row: any) => {
  const name = row.name
  router.push({
    path: '/job/jobInfo/jobInfoForm',
    query: { name }
  })
}

// 删除
const del = (row: any) => {
  const ids = [row.id]
  $confirmMsg('确认删除吗？', () => {
    deleteJobInfo(ids).then(data => {
      search()
    })
  })
}

// 暂停
const pause = () => {
  const selection = mainTableRef.value.$refs.dataTableRef.getSelectionRows()
  const row = selection[0]
  $confirmMsg('确认暂停吗？', () => {
    pauseJobInfo(row.id).then(() => {
      search()
    })
  })
}

// 恢复
const resume = () => {
  const selection = mainTableRef.value.$refs.dataTable.getSelectionRows()
  const row = selection[0]
  $confirmMsg('确认恢复吗？', () => {
    resumeJobInfo(row.id).then(() => {
      search()
    })
  })
}

// 触发
const trigger = () => {
  const selection = mainTableRef.value.$refs.dataTable.getSelectionRows()
  const row = selection[0]
  $confirmMsg('确认立即执行吗？', () => {
    triggerJobInfo({ name: row.name, groupCode: row.groupCode }).then(() => {
      search()
    })
  })
}
</script>

<style lang="scss" scoped></style>
